import React, { Component } from "react";
import { Link } from "react-router-dom";

import Mutil from "util/mim.jsx";
import User from "server/user-server.jsx";

import PageTitle from "components/page-title/index.jsx";
import Pagination from "util/pagination/index.jsx";
import TableList from "util/table-list/index.jsx";

const user = new User();
const mm = new Mutil();

export default class UserList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      pageNum: 1,
    };
  }
  componentDidMount() {
    this.loadUserList();
  }
  loadUserList() {
    user.getUserList(this.state.pageNum).then(
      res => {
        console.log(res)
        this.setState(res);
      },
      errMsg => {
        this.setState({
          list:[]
        })
        mm.errorTips(errMsg);
      }
    );
  }
  //页数发生变化
  onPageChange(pageNum) {
    this.setState(
      {
        pageNum: pageNum
      },
      () => {
        this.loadUserList();
      }
    );
  }
  render() {
    // let listBody = 
    return (
      <div id="page-wrapper">
        <PageTitle title="用户列表" />
        <TableList tableHeads={['ID','🚹用户名','📫邮箱','📞电话','📅注册时间']}>
          {
            this.state.list.map((user, index) => {
              return (
                <tr key={index}>
                  <td>{user.id}</td>
                  <td>{user.username}</td>
                  <td>{user.email}</td>
                  <td>{user.phone}</td>
                  <td>{new Date(user.createTime).toLocaleString()}</td>
                </tr>
              );
            })
          }
        </TableList>
        <Pagination
          current={this.state.pageNum}
          total={this.state.total}
          onChange={pageNum => {
            this.onPageChange(pageNum);
          }}
        />
      </div>
    );
  }
}
